<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>维修保养</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-tabs__line {
            width: .3rem !important;
        }
        .repair-f3 div{
            background: #E6E6E6 100%;
            border: .01rem solid #E6E6E6 !important;
            color: #999 !important;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div v-if="listMaintenance&&listMaintenance.length>0">
            <div class="logistics-item flex-x-s" v-for="(item,index) in listMaintenance" :key="index" @click="goPage(1,item)">
                <img v-lazy="item.imageUrl" alt="">
                <div class="repair-right">
                    <div class="repair-f1">{{item.shopName}}</div>
                    <div class="repair-f2">{{item.addressName}}</div>
                    <div class="repair-f3 flex-x-s flex-wrap">
                        <div v-for="(it,idx) in item.tags" :key="idx">{{it.name}}</div>
                    </div>
                    <div class="repair-f4 flex-x-e-c" >
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/kf.png" alt="" @click.stop="gIMCommon(item.userId)">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/nav.png" alt="" @click.stop="goMap(item)">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/phone.png" alt="" @click.stop="call(item.phone)">
                    </div>
                </div>
            </div>
            <div class="no-more" v-if="!hasNext">没有更多了</div>
        </div>
        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        <div class="peijianshangcheng">
            <div class="release" @click="goPage(2)">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
            <div class="screen-condition">
                <div>{{conditionName}}</div>
                <div class="screen-condition-list flex-x-s flex-wrap">
                    <div class="screen-condition-item" v-for="(item,index) in conditionList" :key="index" :class="{active:index == conditionCurIndex}" @click="selectCondition(index,item)">{{item.val || item.name}}</div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function() {
            imgLazyLoad();
            vm = new Vue({
                el: '.app',
                data: {
                    show: false,
                    wxIndex: 0,
                    listMaintenance: [],
                    conditionCurIndex: 0,
                    conditionList: [],
                    conditionName: '店铺类型',
                    conditionIndexObj: {
                        storeIndex: 0,
                        serveIndex: 0,
                        distanceIndex: 0,
                    },
                    conditionCurItem: {}, //选中的项
                    objectOption: {
                        listStore: [{id: '-1', val: '全部'}, {id: '0', val: '配件商'}, {id: '1', val: '维修点'}, {id: '2', val: '整机商'}], // 店铺类型
                        listServe: [], // 服务类型
                        listDistance: [
                            {id: '-1', val: '全部'},
                            {id: '0', val: '50km内', distance: 50 * 1000},
                            {id: '1', val: '100km内', distance: 100 * 1000},
                            {id: '2', val: '200km内', distance: 200 * 1000},
                            {id: '3', val: '500km内', distance: 500 * 1000},
                            {id: '4', val: '1000km内', distance: 1000 * 1000}] //距离
                    },
                    objectParam: {
                        pageNum: 1,
                        pageSize: 10,
                        typeIds: [],
                        tagIds: [],
                        areaIds: [],
                        location:null,
                        maxDistance: null,
                        status: 1
                    },
                    hasNext: true,
                    authStatus:{
                        merchant:-1,
                        personal:-1
                    }
                },
                mounted() {
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}

                    //var location = $api.getStorage('location_home') || {}
                    this.objectParam.location = JSON.parse(location).location;
                    // 获取数据
                    this.getData()
                        // 获取服务
                    this.getListTags(10)
                    this.getAuthorizationStatus()
                },
                methods: {
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    goMap(item){
                        openMap(item.location,item.addressName)
                    },
                    getData() {
                        var param = {}
                        for (var key in this.objectParam) {
                            if (this.objectParam[key]) {
                                param[key] = this.objectParam[key]
                            }
                        }
                        var vm = this;
                        index.maintenance('getListMaintenance')(param, function(ret) {
                            console.log("数据：" + JSON.stringify(ret))
                            if (vm.objectParam.pageNum == 1) {
                                vm.listMaintenance = ret.data.list
                            } else {
                                vm.listMaintenance = vm.listMaintenance.concat(ret.data.list)
                            }
                            vm.hasNext = ret.data.hasNext
                        })
                    },
                    getListTags(type) {
                        var vm = this;
                        release('getListTags')(type, function(ret) {
                            ret.data.unshift({
                                id: -1,
                                name: '全部'
                            })
                            if (type === 10) {
                                vm.objectOption.listServe = ret.data
                            }
                        })
                    },
                    back() {
                        api.closeWin();
                    },
                    select(index) {
                        if (index == 0) {
                            this.conditionCurIndex = this.conditionIndexObj.storeIndex
                            this.conditionName = '店铺类型'
                            this.conditionList = this.objectOption.listStore
                        } else if (index == 1) {
                            this.conditionCurIndex = this.conditionIndexObj.serveIndex
                            this.conditionName = '服务类型'
                            this.conditionList = this.objectOption.listServe
                        } else if (index == 2) {
                            api.openWin({
                                name: 'area_select_win',
                                url: '../select/area_select_win.html',
                                bounces: false,
                                pageParam: {
                                    key: 'value'
                                }
                            });
                            return false;
                        } else if (index == 3) {
                            this.conditionCurIndex = this.conditionIndexObj.distanceIndex
                            this.conditionName = '距离'
                            this.conditionList = this.objectOption.listDistance
                        }
                        this.wxIndex = index
                        this.show = true
                    },
                    selectCondition(index, item) {
                        this.conditionCurIndex = index
                        this.conditionCurItem = item
                    },
                    confirm() {
                        var item = this.conditionCurItem
                        if (this.wxIndex == 0) {
                            this.objectParam.typeIds = []
                            this.conditionIndexObj.storeIndex = this.conditionCurIndex
                            if (item.id > 0) this.objectParam.typeIds.push(item.id)
                        } else if (this.wxIndex == 1) {
                            this.objectParam.tagIds = []
                            this.conditionIndexObj.serveIndex = this.conditionCurIndex
                            if (item.id > 0) this.objectParam.tagIds.push(item.id)
                        } else if (this.wxIndex == 2) {
                            return false;
                        } else if (this.wxIndex == 3) {
                            this.objectParam.maxDistance = ''
                            this.conditionIndexObj.distanceIndex = this.conditionCurIndex
                            if (item.id >= 0)  this.objectParam.maxDistance = parseInt(item.distance)
                        }
                        this.objectParam.pageNum = 1
                        this.listMaintenance = []
                        this.getData()
                        this.show = false
                    },
                    call(phone) {
                        if (!checkToken()) return false;
                        phone = phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        },function(ret,err){
                            if(ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex-1]
                            });
                        });
                    },
                    goPage(type,item) {
                        if (type == 1) {
                            api.openWin({
                                name: 'maintenance_detail_win',
                                url: './maintenance_detail_win.html',
                                bounces: false,
                                pageParam: {
                                    id: item.id,
                                    title: item.shopName
                                }
                            });
                        } else {
                            if (!checkToken()) return false;
                            if(vm.authStatus.merchant == 1 || vm.authStatus.personal == 1){
                                api.openWin({
                                    name: 'release_edit_win',
                                    url: '../release/release_edit_win.html',
                                    bounces: false,
                                    pageParam: {
                                        editName: '维修保养',
                                        status: 'edit'
                                    }
                                });
                            }else{
                                toastMiddle('认证通过后才可进行发布')
                            }
                        }
                    }
                },
            })
            api.addEventListener({
                name: 'filterDistrict'
            }, function(ret, err) {
                console.log(JSON.stringify(ret))
                vm.objectParam.areaIds = []
                if (ret.value.city.id > 0) vm.objectParam.areaIds = [ret.value.city.id]
                vm.objectParam.pageNum = 1
                vm.getData()
            });
            api.addEventListener({
                name: 'showFilterBox'
            }, function(ret, err) {
                vm.select(ret.value.index)
            });
            // 下拉刷新
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function(ret, err) {
                vm.listMaintenance = []
                vm.objectParam.pageNum = 1
                vm.getData();
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function(ret, err) {
                console.log('加载');
                if (vm.hasNext) {
                    vm.objectParam.pageNum++
                        vm.getData();
                }
            });
            api.addEventListener({
                name: 'login'
            }, function(ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>
